<template>
  <a-card>
    <a-form @submit="handleSubmit" :form="form" class="form">
      <a-row :gutter="[8]">
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入编码" />
          </a-form-item>
        </a-col>
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入名称" />
          </a-form-item>
        </a-col>
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-space>
              <a-button type="primary">查询</a-button>
              <a-button>重置</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <vxe-toolbar>
      <template #buttons>
        <a-space>
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="2">
                从Excel导入
              </a-menu-item>
              <a-menu-item key="3">
                单个新增
              </a-menu-item>
              <a-menu-item key="3">
                批量新增
              </a-menu-item>
            </a-menu>
            <a-button type="primary">新增<a-icon type="down" /> </a-button>
          </a-dropdown>
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                所有订单推送
              </a-menu-item>
              <a-menu-item key="2">
                生产订单推送
              </a-menu-item>
              <a-menu-item key="3">
                采购订单推送
              </a-menu-item>
              <a-menu-item key="3">
                外协订单推送
              </a-menu-item>
            </a-menu>
            <a-button type="primary">推送订单<a-icon type="down" /> </a-button>
          </a-dropdown>
          <a-button type="danger">批量删除</a-button>
          <a-radio-group default-value="全部">
            <a-radio value="全部">
              全部（100）
            </a-radio>
            <a-radio value="采购需求">
              采购需求（30）
            </a-radio>
            <a-radio value="自制需求">
              自制需求（30）
            </a-radio>
            <a-radio value="委外需求">
              委外需求（40）
            </a-radio>
          </a-radio-group>
        </a-space>
      </template>
    </vxe-toolbar>
    <vxe-table ref="xTable1" border stripe height="400"
      :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
      :row-config="{ isHover: true }" :data="tableData"
      :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
      <vxe-column type="checkbox" width="40"></vxe-column>
      <vxe-column type="seq" width="30"></vxe-column>
      <vxe-column field="相关物料" title="相关物料" sortable show-overflow width="100"></vxe-column>
      <vxe-column field="日期" title="日期" sortable show-overflow width="100"></vxe-column>
      <vxe-column field="预计开始库存" title="预计开始库存" align="right" sortable show-overflow width="180"></vxe-column>
      <vxe-column field="补货建议（+）" title="补货建议（+）" align="right" sortable show-overflow width="150"></vxe-column>
      <vxe-column field="毛需求（-）" title="毛需求（-）" align="right" sortable show-overflow width="150"></vxe-column>
      <vxe-column field="预计结束库存" title="预计结束库存" align="right" sortable show-overflow width="180"></vxe-column>
      <vxe-column field="需求类型" title="需求类型" sortable width="150"></vxe-column>
      <vxe-column field="MRP计划编号" title="MRP计划编号" sortable width="150">
        <template #default="{ rowIndex }"><a href="#">MRP-20231010-000{{ rowIndex + 1 }}</a></template>
      </vxe-column>
      <vxe-column field="备注" title="备注" show-overflow width="200"></vxe-column>
      <vxe-column field="推送状态" title="推送状态" show-overflow width="100"></vxe-column>
      <vxe-column field="操作" title="操作" fixed="right" width="250">
        <template #default>
          <a-button type="link">推送订单</a-button>
          <a-button type="link">编辑</a-button>
          <a-button type="link" danger>删除</a-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
      icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
      icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
    </vxe-pager>
  </a-card>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "编码": "LOC-001",
          "名称": "车加工中心A-供料区",
          "上游工作中心": "车加工中心A",
          "需求类型": "采购需求",
          "备注": "",
        },
        {
          "编码": "LOC-002",
          "名称": "车加工中心B-供料区",
          "上游工作中心": "车加工中心A",
          "需求类型": "外协需求",
          "备注": "",
        },
        {
          "编码": "LOC-003",
          "名称": "CNC1#-供料区",
          "上游工作中心": "车加工中心A",
          "需求类型": "自制需求",
          "备注": "",
        },
        {
          "编码": "LOC-004",
          "名称": "CNC2#-供料区",
          "上游工作中心": "车加工中心A",
          "需求类型": "自制需求",
          "备注": "",
        }
      ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less"></style>